<template>
    <div class="flex_col_start w100 flex_grow">
        <label class="flex_center_self">{{ ctx.name }}</label>
        <div class="w100 flex_grow flex_row" style=" justify-content: space-between;">
            <div class="flex_col_start h100" style="overflow-y: auto;">
                <FirmFileItem v-for="(item, index) in ctx.firmFiles" :key="index" @delete="onItemDelete(item)"
                    @download="onItemDownload(item)" :firm-file="item" />
            </div>
            <CreateFirmFileParts :type_id="ctx.type_id" @created="onCreated" />
            <div></div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import CreateFirmFileParts from '@/components/CreateFirmFileParts.vue';
import FirmFileItem from '@/components/FirmFileItem.vue';
import { deleteFirmFile, downloadFirmFileUrl, queryFirmFile, type TbFirmFile } from '@/service/firm_file';
import { runAction } from '@/utils/ui';
import { parseNumber } from '@/utils/utils';
import { reactive } from 'vue';
import { useRoute } from 'vue-router';


const route = useRoute();

interface Ctx {
    type_id: number,
    name: string,
    firmFiles: TbFirmFile[]
}

const ctx = reactive<Ctx>({
    type_id: parseNumber(route.query.type_id as string),
    name: route.query.name as string,
    firmFiles: [],
});

async function init() {
    const items = await queryFirmFile(ctx.type_id);
    ctx.firmFiles = items;
}

init();

async function onCreated() {
    await runAction('更新', '', async () => {
        await init();
    });
}

async function onItemDelete(item: TbFirmFile) {
    await runAction('删除', '', async () => {
        await deleteFirmFile(item.id);
        await init();
    });
}

async function onItemDownload(item: TbFirmFile) {
    window.open(downloadFirmFileUrl(item.id));
}

</script>
